import React, { Component } from 'react'
import { Modal,Input, message,Form, Select } from 'antd'

import axios from 'axios'

const { Option } = Select;
export default class Add extends Component {
    state={
        "memberName": "",
        "memberPass": "",
        "confirmpass":"",
        "role": 3,
        clone:this.props.clone,
    }
    getVal=(e)=>{
        // console.log(this.defaultState)
        if(this.state.clone){
            this.setState({
                [e.target.name]:e.target.value
            })
        }else{
            this.setState({
                clone:true
            })
        }

    }
    // 判断密码和确认密码是否一致
    handleblur =()=>{
        const {memberPass,confirmpass} = this.state
    if (memberPass === confirmpass) {
        console.log(this.state.role)
            axios.post("/api/payment/admin/save",{
                "memberName": this.state.memberName,
                "memberPass": this.state.memberPass,
                "role": this.state.role
            }).then(res=>{
                console.log(res)
                if(res.data.code===200){
                    message.success(res.data.msg,1,()=>{
                        this.closeAdd()
                    })
                }else{
                    message.error(res.data.msg)
                }
            })
    }else{
        message.error("两次密码不一致！")
    }
    
    }
    // 添加调用的方法
    add=()=>{
        const {memberName,confirmpass,memberPass,role} = this.state
        if (!memberName) {
            message.error("用户名不能为空！")
        }else if (!memberPass){
            message.error("密码不能空！")
        }else if(!confirmpass){
            message.error("确认密码不能为空！")
        }else if (role === 3) {
            message.error("权限不能为空！")
        }else{
            this.handleblur()
        }
        
    }
    closeAdd=()=>{
        this.setState({
            "memberName": "",
            "memberPass": "",
            "confirmpass":"",
            
        })
        this.props.closeAdd()
    }
    // 权限框
    formRef = React.createRef();
        onGenderChange = (value) => {
            console.log(value)
            if (value === "user") {
                this.setState({role:0})
            }else if(value === "admin"){
                this.setState({role:1})
            }else if(value === "superadmin"){
                this.setState({role:2})
            }
        };
  render() {
    return (
      <div>
          <Modal title="添加管理员" visible={this.props.addVisible} okText={"确定"} cancelText={"取消"} onCancel={this.closeAdd} onOk={this.add}>
              <Input style={{height: "50px",marginBottom:" 20px",borderRadius: "5px"}} type="text" value={this.state.memberName} placeholder="请输入需要添加的管理员名" name="memberName" onChange={this.getVal}/>
              <Input.Password placeholder="请输入密码" style={{height: "50px",marginBottom:" 20px",borderRadius: "5px"}} value={this.state.memberPass} name="memberPass" onChange={this.getVal}/>
              <Input.Password placeholder="请确认密码" style={{height: "50px",marginBottom:" 20px",borderRadius: "5px"}} value={this.state.confirmpass} name="confirmpass" onChange={this.getVal} />
              <Form>
              <Form.Item style={{width:"200px",borderRadius: "5px"}} name="gender" rules={[{required: true,},]}>
                <Select placeholder="请选择权限" onChange={this.onGenderChange}>
                    <Option value="user">用户</Option>
                    <Option value="admin">管理员</Option>
                    <Option value="superadmin">超级管理员</Option>
                </Select>
            </Form.Item>
              </Form>
          </Modal>
      </div>
    )
  }
}
